<template>
	<div class="login">
		<el-row type="flex" justify="center">
			<el-col :span="6"></el-col>
		</el-row>

		<el-row type="flex" justify="center" :span="8">
			<!-- <el-col :span="8" :offset="8"> -->
			<el-card shadow="always">
				<h2 style="text-align: center;"> 欢迎{{radio}}</h2>
				<el-divider></el-divider>
				<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="账号" prop="user" :rules="[
						{ required: true, message: '用户名不能为空'},
						]">
						<el-input placeholder="请输入账号" type="user" v-model.number="numberValidateForm.user" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="密码" prop="password" :rules="[
			{ required: true, message: '密码不能为空'},
			]">
						<el-input placeholder="请输入密码" v-model.number="numberValidateForm.password" show-password></el-input>
					</el-form-item>

					<el-form-item v-show="radio!='登录'" label="手机号" prop="phone" :rules="[
			{ required: true, message: '手机号不能为空'},
			]">
						<el-input placeholder="请输入手机号" type="user" v-model.number="numberValidateForm.phone" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item v-show="radio!='登录'" prop="email" label="邮箱" :rules="[
				{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
			{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
			]">
						<el-input placeholder="请输入邮箱" v-model="numberValidateForm.email"></el-input>
					</el-form-item>

					<el-form-item>
						<el-radio-group v-model="radio">
							<el-radio label="登录">登录</el-radio>
							<el-radio label="注册">注册</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
						<el-button @click="resetForm('numberValidateForm')">重置</el-button>
						<!-- 注册在这里 -->
					</el-form-item>
				</el-form>
			</el-card>
		</el-row>
		<div class="recordnNumberBox" >
	<a href="https://beian.miit.gov.cn/" target="_blank" class="recordnNumber">粤ICP备2021022152号</a>
</div>
	</div>
</template>


<script>
	export default {
		name: "login",
		data() {
			return {
				numberValidateForm: {
					user: "",
					password: "",
					phone: "",
					email: "",
				},
				l_or_r: "",
				radio: "登录", //0为登录，1为注册
				// cookie: "wdadsadsdasda",
				tips: [
					"登陆成功",
					"登陆失败",
					"注册成功",
					"邮箱已被注册",
					"手机已被注册",
					"用户名已被注册",
				],
			};
		},

		methods: {
			submitForm(formName) {
				var that = this;
				this.$refs[formName].validate(() => {
					if (this.radio == "登录") {
						//用于路由
						// console.log(this.numberValidateForm.user);
						// console.log(this.numberValidateForm.password);
						this.axios({
							method: "post",
							url: "http://47.115.152.5:8080/admin/login.do",
							params: {
								username: this.numberValidateForm.user,
								password: this.numberValidateForm.password,
							},
							withCredentials: true,
						}).then(function(res) {
							//console.log(res.data.msg);
							if (res.data.msg == "登录成功！") {
								// alert("登陆成功");
								that.susTips(0);
								//window.location.assign("../main/main.html");
								that.$router.push({
									name: 'main_page'
								});
							} else {
								alert("用户名或密码错误");
							}
						});
					} else {
						this.axios({
							method: "post",
							url: "http://47.115.152.5:8080/admin/register.do",
							params: {
								username: this.numberValidateForm.user,
								password: this.numberValidateForm.password,
								phone: this.numberValidateForm.phone,
								email: this.numberValidateForm.email,
							},
							headers: {
								"Content-Type": "application/x-www-form-urlencoded",
							},
							withCredentials: true,
						}).then(function(res) {
							if (res.data.msg == "注册成功") {
								alert("注册成功，请返回登录");
							} else if (res.data.msg == "邮箱已被注册") {
								alert("邮箱已被注册！");
							} else if (res.data.msg == "该手机已被注册") {
								alert("该手机已被注册");
							} else if (res.data.msg == "用户名已存在") {
								alert("用户名已存在");
							}
						});
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			
			errTips(option) { //错误信息提示
				this.$notify.error({
					title: '错误',
					message: this.tips[option]
				});
			},
			susTips(option) { //成功信息提示
				this.$notify({
					title: '成功',
					message: this.tips[option],
					type: 'success'
				});
				}
		},
	};
</script>

<style scoped>
	.el-row {
		margin-bottom: 100px;
		}

	.el-col {
		border-radius: 5px;
	}
	.recordnNumber{
		position: absolute;
		bottom: 0;
		left:50%;
		transform:translate(-50%,0);

	}
</style>
